<template>
  <div>
    <websocket ref="websocket"></websocket>
    <login ref="login" v-show="vdata.pagename == 'login'"></login>
    <create ref="create" v-show="vdata.pagename == 'create'"></create>

    <div class="mud-container" v-show="vdata.pagename != 'login' && vdata.pagename != 'create'">
      <div class="mud-main">
        <game ref="game" v-show="vdata.pagename == 'game'"></game>
      </div>
      <btns :class="[vdata.onpc?'mud-btns':'mud-btns-ph']" ref="btns"></btns>
      <perform :class="[vdata.onpc?'mud-perform':'mud-perform-ph']" ref="perform"></perform>
    </div>

    <modfunc ref="modfunc"></modfunc>
    <modinfo ref="modinfo"></modinfo>

  </div>
</template>

<script>
/* eslint-disable comma-dangle */

import login from './page/Login.vue'
import create from './page/Create.vue'

import game from './page/Game.vue'

import btns from './page/Btns.vue'
import perform from './page/Perform.vue'

import modfunc from './page/Modfunc.vue'
import modinfo from './page/Modinfo.vue'

import websocket from './WebSocket.vue'

import ConfigProtocolResult from '../confjson/ConfigProtocolResult.json'

export default {
  name: 'Mud',
  data: function () {
    return {
      vdata: this.gdata.data
    }
  },
  components: {
    login: login,
    create: create,

    game: game,

    btns: btns,
    perform: perform,

    modfunc: modfunc,
    modinfo: modinfo,

    websocket: websocket,
  },
  mounted: function () {
    this.gdata.devicecheck()
    document.onkeyup = this.onkeyevent
  },
  computed: {
    gameheight: function () {
      var screenh = document.documentElement.clientHeight
      return (screenh - (this.vdata.onpc ? 100 : 130)) + 'px'
    }
  },
  methods: {
    onkeyevent: function (e) {
      var key = window.event.keyCode
      if (this.$refs.modfunc.isshow()) {
        this.$refs.modfunc.onkeyevent(key)
        return
      }
      if (this.$refs.modinfo.isshow()) {
        this.$refs.modinfo.onkeyevent(key)
        return
      }
      switch (this.vdata.pagename) {
        case 'login':
          this.$refs.login.onkeyevent(key)
          break
        case 'create':
          this.$refs.create.onkeyevent(key)
          break
        case 'game':
          this.$refs.game.onkeyevent(key)
          break
        default: break
      }
    },
    G2C: function (rsp) {
      var pid = this.proto.MapProtocolId.properties[rsp._protocol].name
      var success = (rsp._result === 0)
      var result = ConfigProtocolResult[rsp._result].LangChs
      if (!success) {
        if (rsp._result === 3) {
          this.jxtoast(rsp.Shuttle)
          this.jxwdtextc(rsp.Shuttle, 'white')
        } else {
          this.jxtoast(result)
          this.jxwdtextc(result, 'white')
        }
        return
      }

      this.jxdebug('收到消息' + pid)

      switch (pid) {
        case 'L2C_LOGIN_CONNECT':
        case 'G2C_LOGIN_CONNECT':
          // this.jxpage('create')
          this.jxpage('login')
          break
        case 'L2C_LOGIN_USERLOGIN':
        case 'G2C_LOGIN_PLAYERLOGIN':
          this.$refs.login.G2C(pid, rsp, success, result)
          break
        case 'G2C_LOGIN_PLAYERCREATE':
          this.$refs.create.G2C(pid, rsp, success, result)
          break
        case 'G2C_INFO_GETALL':
          this.vdata.plogin = true
          this.gdata.setinfoplayer(rsp.InfoBase, rsp.InfoMisc, rsp.InfoGame, rsp.DictProp)
          break
        case 'G2C_INFO_PUSHALL':
          this.gdata.setinfoplayer(rsp.InfoBase, rsp.InfoMisc, rsp.InfoGame, rsp.DictProp)
          break
        case 'G2C_INFO_PUSHBASE':
          this.gdata.setinfoplayerbase(rsp.InfoBase, rsp.InfoMisc, rsp.DictProp)
          break
        case 'G2C_GAME_MESSAGE':
        case 'G2C_CHAT_RECEIVE':
          this.$refs.game.$refs.window.G2C(pid, rsp, success, result)
          break
        case 'G2C_ROOM_INFO':
          this.$refs.game.$refs.window.G2C(pid, rsp, success, result)
          this.$refs.game.$refs.wheel.G2C(pid, rsp, success, result)
          this.$refs.game.$refs.thing.G2C(pid, rsp, success, result)
          break
        case 'G2C_ROOM_ROOMTHING':
          this.$refs.game.$refs.thing.G2C(pid, rsp, success, result)
          break
        case 'G2C_CHAR_SCORE':
          this.$refs.modfunc.$refs.score.G2C(pid, rsp, success, result)
          this.jxmodfunc('score')
          break
        case 'G2C_SKILL_LIST':
        case 'G2C_SKILL_LEVELUP':
        case 'G2C_SKILL_USAGEUSE':
          this.$refs.modfunc.$refs.skills.G2C(pid, rsp, success, result)
          this.jxmodfunc('skills')
          break
        case 'G2C_CHAR_OFFLINEINFO':
        case 'G2C_CHAR_OFFLINE':
          this.$refs.modfunc.$refs.offline.G2C(pid, rsp, success, result)
          this.jxmodfunc('offline')
          break
        case 'G2C_CHAR_INV':
        case 'G2C_ITEM_DROP':
        case 'G2C_ITEM_USE':
        case 'G2C_EQUIP_DROP':
        case 'G2C_EQUIP_WEAR':
        case 'G2C_EQUIP_CHANGE':
        case 'G2C_EQUIP_UNWEAR':
          this.$refs.modfunc.$refs.inv.G2C(pid, rsp, success, result)
          this.jxmodfunc('inv')
          break
        case 'G2C_EQUIP_INFOROOM':
        case 'G2C_EQUIP_INFOINV':
          this.$refs.modinfo.$refs.equip.G2C(pid, rsp, success, result)
          this.jxmodinfo('equip')
          break
        default:
          // 这里是没有找到对应的值处理
          break
      }
    }
  }
}
</script>

<style scoped>
.mud-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.mud-main {
  flex-grow: 1;
  overflow: auto;
}
.mud-btns {
  height: 30px;
  flex-shrink: 0;
}
.mud-btns-ph {
  height: 60px;
  flex-shrink: 0;
}
.mud-perform {
  height: 30px;
  flex-shrink: 0;
}
.mud-perform-ph {
  height: 60px;
  flex-shrink: 0;
}
</style>
